<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
			/*伪类选择器  语法：任意选择器：hover【悬停】 每个伪类选择器，具备特点
			             所有元素具备：hover【常见伪类选择器】        
			*/
		   h1:hover{
			background: #ffaa00; 
			  color: #00ffff;
		   }
		/**
		 * 伪类选择器:    :link    链接未点击时状态
		 *               :active  链接被点击时状态
		 *               :visited 链接点击后状态
		 *               :hover   悬停链接时状态
		 * 主要结合在一起，针对a元素
		 */
		a:link{/*未访问状态*/
			color: #00ff00;
			/*去掉超链接下划线*/
			text-decoration: none;
		}
		a:active{/*被点击时状态*/
		color:#aaaaff;
		background: #ffff00;	
		}
		a:visited{/*点击后状态*/
			color: #aaaaff;
			background: #ffaa00;
		}
		a:hover{
			font-size: 36px;
		}
		/**
		 * 伪类选择器:  input : focus 获取焦点 鼠标点击输入框时效果
		 * 
		 针对 输入框 input元素
		 */   
		input:focus{
			background: #ffff00;
		}   
		/*伪类选择器：   :first-child 第一个儿子元素
		                :last-child  最后一个儿子元素
						:nth-child(n) 匹配n个儿子元素
						针对：父子级，默认父子级 table、列表..
		*/
	   li:first-child{
		   background: #00ff00;
		   color: #00ffff;
	   }
	   li:last-child{
		   font-size: 15pt;
	   }
	   li:nth-child(2){
		   background: #ffaa00;
		   font-size: 15px;
	   }
	   li:nth-child(3){
		   background: #ffaa00;
		   font-size: 15px;
	   }
		</style>
	</head>
	<body>
		<h1>鼠标悬停效果</h1>
		超链接
		<input type="text">
		<!-- 元素之间存在父子级关系，默认存在父子关系 -->
		<ol>
			<li>唐山</li>
			<li>邢台</li>
			<li>承德</li>
			<li>保定</li>
		</ol>
	</body>
</html>